<template>
  <div class="echarts">
    <div ref="myEchart" :style="{height:'350px',width:'100%'}"/>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Echarts',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chinaConfigure()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    chinaConfigure() {
      const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({ // 进行相关配置
        backgroundColor: '',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        title: {
          text: '销售区域排行'
        },
        dataRange: {
          show: true,
          min: 0,
          max: 1000,
          text: ['高', '低'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false, // 鼠标滚动放大缩小
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            name: '启动次数', // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: [
              { name: '北京', value: Math.round(Math.random() * 500) },
              { name: '天津', value: Math.round(Math.random() * 500) },
              { name: '上海', value: Math.round(Math.random() * 500) },
              { name: '重庆', value: Math.round(Math.random() * 500) },
              { name: '河北', value: Math.round(Math.random() * 500) },
              { name: '河南', value: Math.round(Math.random() * 500) },
              { name: '云南', value: Math.round(Math.random() * 500) },
              { name: '辽宁', value: Math.round(Math.random() * 500) },
              { name: '黑龙江', value: Math.round(Math.random() * 500) },
              { name: '湖南', value: Math.round(Math.random() * 500) },
              { name: '安徽', value: Math.round(Math.random() * 500) },
              { name: '山东', value: Math.round(Math.random() * 500) },
              { name: '新疆', value: Math.round(Math.random() * 500) },
              { name: '江苏', value: Math.round(Math.random() * 500) },
              { name: '浙江', value: Math.round(Math.random() * 500) },
              { name: '江西', value: Math.round(Math.random() * 500) },
              { name: '湖北', value: Math.round(Math.random() * 500) },
              { name: '广西', value: Math.round(Math.random() * 500) },
              { name: '甘肃', value: Math.round(Math.random() * 500) },
              { name: '山西', value: Math.round(Math.random() * 500) },
              { name: '内蒙古', value: Math.round(Math.random() * 500) },
              { name: '陕西', value: Math.round(Math.random() * 500) },
              { name: '吉林', value: Math.round(Math.random() * 500) },
              { name: '福建', value: Math.round(Math.random() * 500) },
              { name: '贵州', value: Math.round(Math.random() * 500) },
              { name: '广东', value: Math.round(Math.random() * 500) },
              { name: '青海', value: Math.round(Math.random() * 500) },
              { name: '西藏', value: Math.round(Math.random() * 500) },
              { name: '四川', value: Math.round(Math.random() * 500) },
              { name: '宁夏', value: Math.round(Math.random() * 500) },
              { name: '海南', value: Math.round(Math.random() * 500) },
              { name: '台湾', value: Math.round(Math.random() * 500) },
              { name: '香港', value: Math.round(Math.random() * 500) },
              { name: '澳门', value: Math.round(Math.random() * 500) }
            ]
          }
        ]
      })
    }
  }
}
</script>
